<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>regist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/login_register.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

    <style>

        .text_img_contain {
            overflow: hidden;
            left: 0;
        }

        .register_contain {
            left: 30%;
        }

        .login_text {
            left: 0%;
        }
    </style>
</head>
<body>
<div class="full_screen" id="wrap">
    <div id="" class="contain">
        <div id="text_img_contain" class="text_img_contain">
            <div id="text_img" class="text_img">
                <div id="login_text" class="form_style_text login_text">
                    <div id="login_text" class="form_style_text_title login_text_title">
                        <h1>已有账号</h1>
                    </div>
                    <div id="login_text_button_contain"
                         class="form_style_text_button_contain login_text_button_contain">
                        <a href="/login.html">登录</a>

                    </div>
                </div>
                <div id="img_contain" class="img_contain">
                </div>
                <div id="" class="text_img_shadow">
                </div>
            </div>

            <div id="register_contain" class="form_style_contain register_contain">
                <form action="login.html" method="post">
                    <h1>注册</h1>
                    <span id="">账户</span>
                    <input type="text" v-model="user.username" class="register_username"
                           id="register_username" value="" placeholder="请输入你注册的用户名" pattern=""/>
                    <span>姓名</span>
                    <input type="text" v-model="user.realname" class="register_pwd" id="register_pwd"
                           value="" placeholder="请输入你的姓名"/>
                    <span>确认密码</span>
                    <input type="password" v-model="user.password" class="register_pwd2"
                           id="register_pwd2" value="" placeholder="请输入你的密码"/>
                    <div class="sexbox">
                        <div>性别:</div>
                        <div>男</div>
                        <input type="radio" class="inputgri" v-model="user.sex" value="男" checked="checked"/>
                        <div>女</div>
                        <input type="radio" class="inputgri" v-model="user.sex" value="女"/>

                        <!--                        <span id="register_tip" class="register_tip">-->
                        <!--								 &nbsp;-->
                        <!--						</span>-->
                    </div>
                    <span id="">验证码</span>
                    <div class="code">

                        <input type="text" v-model="code"/>
                        <br>
                        <img id="num" :src="url"/>
                        <a href="javascript:;" @click="getSrc">换一张</a>
                    </div>
                    <button type="button" @click="register" class="register_button" id="register_button">注 &nbsp;&nbsp;&nbsp;册</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

</html>

<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            url: "",
            user: {
                sex: "男"
            },
            code: "",
        },
        methods: {
            //获取验证码的
            getSrc() {
                console.log("test")
                axios.get("/user/getImage?time=" + Math.random()).then(res => {
                    this.url = res.data;
                    console.log(res.data)
                });
            },
            //用来注册用户信息
            register() {
                console.log("test")

                axios.post("/user/register?code=" + this.code, this.user).then(res => {
                    console.log(res.data);
                    if (res.data.state) {
                        alert(res.data.msg + ",点击确定跳转至登录页面!");
                        location.href = "/login.html";
                    } else {
                        alert(res.data.msg);
                    }
                });
            }
        },
        created() {
            //获取验证码
            this.getSrc();
        }
    })
</script>